<template>
  <transition name="popshow">
    <div class="bigimg" v-if="show" @click="bigClose">
      <div class="img" :style="{'backgroundImage':'url('+src+')'}"></div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "BigImg",
  props:{
    show:{type:Boolean,default:false},
    src:{type:String,default: ''}
  },
  methods:{
    bigClose(){
      this.$emit('closeBig')
    }
  }
}
</script>

<style scoped>
  .bigimg{
    width: 100%;
    height: 100%;
    position:fixed;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.59);
    z-index: 10000
  }
  .img{
    background: url('http://cloud.pinggai8.com/perception/1663225879099hxxbimage.png') center center/contain no-repeat;
    width: 96%;
    height: 90%;
    margin: 0 auto;
    position: relative;
    top: 5%
  }
  .popshow-leave-active{
    animation: showHide .3s reverse linear;
  }
  .popshow-enter-active{
    animation: showHide .3s linear;
  }
  @keyframes showHide {
    0%{opacity: 0;filter: blur(5)}
    100%{opacity: 1;filter: blur(0)}
  }
</style>